<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>昵图网</title>
    <link rel="stylesheet" href="niTu.css" type="text/css">
</head>
<body>
<div class="app">

    <!--顶部导航栏-->
    <div class="headBar">
        <div class="img" style="margin-left: 250px">
            <a href="http://www.nipic.com/" title="昵图网"><img src="../页面布局/img/nipic.png" alt="昵图网" class="logo"></a>
        </div>
        <div class="titleBar h1">
            <span><a href="" style="color: aqua">首页</a></span>
            <span><a href="">设计</a></span>
            <span><a href="">摄影</a></span>
            <span><a href="">多媒体</a></span>
            <span><a href="">原创交易</a></span>
            <span><a href="">求图求助</a></span>
        </div>
        <div class="btn">
            <a href="" class="Login">登录</a>
            <a href="" class="Logon">注册</a>
        </div>
    </div>
    <!-- 视图滑动区 -->
    <div class="slide">
        <!-- 视图区 -->
        <div class="picture">
            <a href="#" @click="last" class="pre">&#60</a>
            <img :src="imgArr[index].src" :alt="imgArr[index].alt" class="slideImg">
            <a href="#" @click="next" class="next">&#62</a>
        </div>
        <!-- 搜索框   -->
        <div class="searchBar">
            <input type="text" placeholder="请输入标签、关键词、作品编号搜索" class="input">
            <input type="submit" class="submit">
        </div>
        <!-- 底部导航小横条(对应图片位置颜色还未做) -->
        <div class="indexControl">
            <div class="index0" @click="img1"></div>
            <div class="index1" @click="img2"></div>
        </div>
    </div>
    <!-- 主视框 -->
    <div class="main">
        <!-- 素材类型选区 -->
        <div class="newIndex">
            <!-- 素材类型选区大图预览 -->
            <div class="clearfix1">
                <a href="#">
                    <img src="../页面布局/img/20200803092052_1.jpg" alt="热血青春"><span class="textItem">毕业季</span>
                </a>
                <a href="#">
                    <img src="../页面布局/img/20200803092100_1.jpg" alt="麻辣龙虾"><span class="textItem">小龙虾</span>
                </a>
                <a href="#">
                    <img src="../页面布局/img/20200803133809_1.jpg" alt="夏令营"> <span class="textItem">夏令营</span>
                </a>
                <a href="#" style="float: left;margin-right:0px">
                    <img src="../页面布局/img/20200803143238_1.jpg" alt="特价"><span class="textItem">印刷服务</span>
                </a>
            </div>
            <!-- 素材类型选区更多类型 -->
            <div class="clearfix2">
                <a href="#">星空</a>
                <a href="#">打折促销海报</a>
                <a href="#">美食海报</a>
                <a href="#">旅游海报</a>
                <a href="#">招生海报</a>
                <a href="#">招聘海报</a>
                <a href="#">最新图片</a>
                <a href="#" style="float: right;margin-right:0">查看更多&#62&#62</a>
            </div>
        </div>
        <!--  素材类型选区  -->
        <div class="paddingLay1">
            <!-- 样式区域限制框 -->
            <div class="margin1">
                <div class="clearfix3">
                    <!-- 素材类型选区左边大图预览 -->
                    <div class="left">
                        <a href="#"><img src="../页面布局/img/20200803092128_1.jpg" alt=""><span
                                class="textItem">活动策划书PPT</span></a>
                    </div>
                    <!-- 素材类型选区右边大图预览 -->
                    <div class="right">
                        <a href="#"><img src="../页面布局/img/20200803092146_1.jpg" alt=""><span class="textItem">主题婚礼</span></a>
                        <a href="#"><img src="../页面布局/img/20200803092154_1.jpg" alt=""><span class="textItem">新中式装饰画</span></a>
                        <a href="#"><img src="../页面布局/img/20200803092202_1.jpg" alt=""><span class="textItem">爱心助农</span></a>
                        <a href="#"><img src="../页面布局/img/20200803092210_1.jpg" alt=""><span class="textItem">房地产</span></a>
                        <a href="#"><img src="../页面布局/img/20200803092221_1.jpg" alt=""><span class="textItem">烧烤</span></a>
                        <a href="#"><img src="../页面布局/img/20200803133852_1.jpg" alt=""><span class="textItem"
                                                                                          style="float: right;margin-right:0">立秋</span></a>
                    </div>
                </div>
                <!-- 素材类型选区更多类型 -->
                <div class="clearfix2">
                    <a href="#">工作总结PPT</a>
                    <a href="#">邀请函</a>
                    <a href="#">黄昏</a>
                    <a href="#">道德讲堂</a>
                    <a href="#">党建</a>
                    <a href="#">APP界面设计</a>
                    <a href="#">周年庆海报</a>
                    <a href="#" style="float: right;margin-right:0">查看更多&#62&#62</a>
                </div>
            </div>
        </div>
        <!-- 更多素材类型 -->
        <div class="paddingLay">
            <div class="clearfix4">
                <div>
                    <span class="t1">免费素材</span><br>
                    <span class="t2">海量共享图任你选</span><br>
                    <a href="#" class="goLook">去看看</a>
                </div>
                <div>
                    <span class="t1">原创精品</span><br>
                    <span class="t2">千万精品图片满足你所需</span><br>
                    <a href="#" class="goLook">去看看</a>
                </div>
                <div>
                    <span class="t1">正版图库<span class="t3">&nbsp推广&nbsp</span></span><br>
                    <span class="t2">正版图片，版权无忧，放心使用</span><br>
                    <a href="#" class="goLook">汇图网</a>
                </div>
                <div style="border: none">
                    <span class="t1">汇图悬赏<span class="t3">&nbsp推广&nbsp</span></span><br>
                    <span class="t2">高端定制，量身打造</span><br>
                    <a href="#" class="goLook">去看看</a>
                </div>
            </div>
        </div>
        <!-- 滚动导航条 -->
        <div class="rollBar">
            <div class="to-huitu">
                <a href="#">定制</a>
            </div>
            <div class="goTop" title="回到顶部">
                <a href="#">⬆</a>
            </div>
        </div>
    </div>
</div>
<!-- vue -->
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
    var slide = new Vue({
        el: ".slide",
        data: {
            index: 0,
            controlBar1Color: "",
            controlBar2Color: "",
            show: false,
            imgArr: [
                {src: "../页面布局/img/20200727151048.jpg", alt: "暑假班"},
                {src: "../页面布局/img/20200803091947.jpg", alt: "党建雕塑"}
            ]
        },
        methods: {
            next: function () {
                if (this.index < 1) {
                    this.index++
                } else
                    this.index = 0
            },
            last: function () {
                if (this.index > 0) {
                    this.index--
                } else
                    this.index = 1
            },
            img1: function () {
                this.index = 0

            },
            img2: function () {
                this.index = 1

            },
            mouseOn: function () {
                this.show = true
            },
            mouseleave: function () {
                this.show = false
            }
        }
    })
</script>
</body>
</html>